<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级管理</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    <!--导入vue.js文件  用于完成页面 数据和展示的分离-->
    <script src="js/vue.js"></script>
    <!--导入elementui文件  使用成型的组件完成页面的搭建-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入依赖样式-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!--导入axios 用于进行 异步请求-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
  <div id="app">
      <template>
           <el-table
             :data="tableData"
             style="width: 100%"
             :row-class-name="tableRowClassName"
             @selection-change="handleSelectionChange">

            <el-table-column
                prop="name"
                label="班级名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="id"
                label="班级编号"
                width="100">
            </el-table-column>
            <el-table-column
                prop="name"
                label="班级名称"
                width="180">
            </el-table-column>


           </el-table>

      </template>
  </div>
      <script>
        let vue = new Vue({
            el:"#app",
           data:{
               tableData:[],
               multipleSelection: []
           },
            mounted(){

              this.findRooms();
            },
            methods:{

                findRooms(){
                  axios.get("http://localhost:8080/ssm_config_war/room/rooms").then(resp =>{
                      if(resp){
                          console.log(resp)
                          this.tableData = resp.data;
                      }
                  })
                },

                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                    console.log(this.multipleSelection)
                },
            }
        });
      </script>
</body>
</html>